<template>
  <div>
    <Card
      title="编辑属性值"
      :bordered="false"
      dis-hover
      class="ivu-mt qw-form-card"
    >
      <div style="width: 60%; margin: 0 auto">
        <Form :model="formLeft" label-position="right" :label-width="100">
          <!--        <FormItem label="值">
            <Input v-model="formLeft.input1"></Input>
          </FormItem>
           <FormItem label="非展示值">
            <Input v-model="formLeft.input2"></Input>
          </FormItem>-->
          <FormItem label="所属分类">
            <Select v-model="model1" style="width: 200px">
              <Option
                v-for="item in cityList"
                :value="item.uuid"
                :key="item.uuid"
                >{{ item.categoryName }}</Option
              >
            </Select>
          </FormItem>
          <FormItem label="自定义" v-if="model1 === 'storeSpec'">
            <Input v-model="formLeft.storeSpec"></Input>
          </FormItem>
          <FormItem label="颜色属性" v-if="model1 === 'color'">
            <Input v-model="formLeft.color"></Input>
          </FormItem>
          <FormItem label="星期" v-if="model1 === 'week'">
            <Select v-model="model2" style="width: 200px">
              <Option
                v-for="item in weekList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}
              </Option>
            </Select>
          </FormItem>
          <FormItem label="时间" v-if="model1 === 'time'">
            <Col span="12">
              <TimePicker
                v-model="model3"
                confirm
                type="timerange"
                placement="bottom-end"
                placeholder="Select time"
                style="width: 168px"
              ></TimePicker>
            </Col>
          </FormItem>

          <FormItem
            label="自定义"
            v-if="
              model1 !== 'time' &&
              model1 !== 'color' &&
              model1 !== 'storeSpec' &&
              model1 !== 'week' &&
              model1 !== ''
            "
          >
            <Input
              v-model="formLeft.storeSpec"
              maxlength="50"
              show-word-limit
            ></Input>
          </FormItem>
          <!--   <FormItem label="属性图片"
                    v-if="model1!=='time'&&model1!=='color'&&model1!=='storeSpec'&&model1!=='week'&&model1!==''">
            <Upload
              action=""
              name="img"
              :maxSize="10240"
              :maxLen="1"
              :defaultList="formLeft.valueImageKey"
              :format="['jpg','jpeg','png']"
              @handleChangeImage="changeSubscriptImg">
            </Upload>
          </FormItem>-->
          <!--    <FormItem label="是否启用">
                <RadioGroup v-model="radioData">
                  <Radio label="1">
                    <span>是</span>
                  </Radio>
                  <Radio label="2">
                    <span>否</span>
                  </Radio>
                </RadioGroup>
              </FormItem>-->

          <FormItem label="">
            <Button
              type="primary"
              :loading="sLoading"
              @click="handleSubmit('formData')"
              >提交</Button
            >
            <Button style="margin-left: 8px" @click="cancel">取消</Button>
          </FormItem>

          <!-- <FormItem label="">
           </FormItem>-->
        </Form>
      </div>
    </Card>
  </div>
</template>
<script>
import { ApiRequest } from '@api/basePage';

export default {
  name: 'attributeValueManageEdit',
  components: {},
  data () {
    return {
      radioData: '1',
      formLeft: {
        storeSpec: '',
        color: '',
        input3: '',
        desc: ''
      },
      weekList: [
        {
          value: '星期一',
          label: '星期一'
        },
        {
          value: '星期二',
          label: '星期二'
        },
        {
          value: '星期三',
          label: '星期三'
        },
        {
          value: '星期四',
          label: '星期四'
        },
        {
          value: '星期五',
          label: '星期五'
        },
        {
          value: '星期六',
          label: '星期六'
        },
        {
          value: '星期日',
          label: '星期日'
        }
      ],
      cityList: [],
      model1: '',
      model2: '',
      model3: '',
      editData: '',
      sLoading: false
    };
  },
  created () {
    this.getData();
    this.getClassify();
  },
  mounted () {},

  methods: {
    // 所属分类
    getClassify () {
      let data = {};
      ApiRequest(
        '/sysback/template/producttemplateattrvaluecategory/getAllAttrValueCategory',
        'post',
        data
      ).then(res => {
        let data = res.retData;
        this.cityList = data;
      });
    },
    // 商品名称角标
    changeSubscriptImg (imgArr) {
      this.formLeft.valueImageKey = imgArr[0].url;
    },
    getData () {
      let uuid = this.$route.query.uuid;
      let data = {
        uuid: uuid
      };
      ApiRequest(
        '/sysback/template/producttemplateattrvalue/baseGetByUuid',
        'post',
        data,
        true
      ).then(res => {
        let data = res.retData;
        // this.cityList = data
        this.editData = data;
        if (data.categoryUuid === 'week') {
          this.model1 = 'week';
          this.model2 = data.value;
        } else if (data.categoryUuid === 'color') {
          this.model1 = 'color';
          this.formLeft.color = data.value;
        } else if (data.categoryUuid === 'storeSpec') {
          this.model1 = 'storeSpec';
          this.formLeft.storeSpec = data.value;
        } else if (data.categoryUuid === 'time') {
          this.model1 = 'time';
          this.model3 = data.value.split('-');
        } else {
          this.model1 = data.categoryUuid;
          this.formLeft.storeSpec = data.value;
        }
        this.formLeft.valueImageKey = data.valueImageKey;
        this.radioData = data.valueState;
      });
    },
    // 取消
    cancel () {
      this.$router.go(-1);
    },
    // 提交
    handleSubmit (name) {
      // this.$refs[name].validate((valid) => {
      // if (valid) {
      let data = this.editData;
      // let data = {}
      if (this.model1 === 'storeSpec') {
        data.value = this.formLeft.storeSpec;
        data.categoryUuid = 'storeSpec';
      } else if (this.model1 === 'color') {
        data.value = this.formLeft.color;
        data.categoryUuid = 'color';
      } else if (this.model1 === 'week') {
        data.value = this.model2;
        data.categoryUuid = 'week';
      } else if (this.model1 === 'time') {
        data.categoryUuid = 'time';
        data.value = this.model3[0] + '-' + this.model3[1];
      } else {
        data.value = this.formLeft.storeSpec;
        data.categoryUuid = this.model1;
      }
      if (this.sLoading) {
        return false;
      }
      this.sLoading = true;
      // 开始请求会员信息
      ApiRequest(
        '/sysback/template/producttemplateattrvalue/updateAttrValue',
        'post',
        data
      ).then(res => {
        if (res.retStatus === '1') {
          this.$Message.success('Success!');

          this.$router.go(-1);
        }
        this.sLoading = false;
      });
      // } else {
      //     this.$Message.error('Fail!');
      // }
      // })
    }
  }
};
</script>
<style lang="less" scoped>
.img {
  width: 88px;
  height: 88px;
  border: 1px solid #999999;
}
</style>
